﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>webkit webApp 开发技术要点总结</title>
    <!--//  编码-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--//  可视区域-->
    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
    <!--//  离线应用的另一个技巧     -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--//  隐藏状态栏        -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--//  指定的iphone中safari顶端的状态条的样式     -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <!--//  告诉设备忽略将页面中的数字识别为电话号码      -->
    <meta content="telephone=no" name="format-detection" />
    <meta name="Author" content="Mr.He" />
    <!--// 设置开始页面图片-->
    <!--<link rel="apple-touch-startup-image" href="startup.png" />-->
    <!--// 在设置书签的时候可以显示好看的图标-->
    <!--<link rel="apple-touch-icon" href="iphon_tetris_icon.png" />-->
    <!--<!--// 肖像模式样式       -->
    <!--<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />-->
    <!--// 风景模式样式-->
    <!--<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />-->
    <!--//竖屏时使用的样式 -->
    <style media="all and (orientation:portrait)" type="text/css">
        #landscape { display: none; }
    </style>
    <!--//横屏时使用的样式 -->
    <style media="all and (orientation:landscape)" type="text/css">
        #portrait { display: none; }
    </style>
</head>
<body>
    <div id="landscape">
        landscape</div>
    <div id="portrait">
        portrait</div>
    <div>
        <dl>
            <dt>viewport属性</dt>
            <dd>
                width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）</dd>
            <dd>
                height - // viewport 的高度 （范围从223 到10,000）</dd>
            <dd>
                initial-scale - // 初始的缩放比例 （范围从>0 到10）</dd>
            <dd>
                minimum-scale - // 允许用户缩放到的最小比例</dd>
            <dd>
                maximum-scale - // 允许用户缩放到的最大比例</dd>
            <dd>
                user-scalable - // 用户是否可以手动缩 (no,yes)
            </dd>
        </dl>
    </div>
    <div>
        <style type="text/css">
        @-webkit-keyframes DivZoom
        {
            0% { -webkit-transform: scale(0.01) }
            60% { -webkit-transform: scale(1.05) }
            80% { -webkit-transform: scale(0.95) }
            100% { -webkit-transform: scale(1.00) }
        }
        .sZoom { -webkit-animation: DivZoom 0.5s ease-in-out; }

        </style>

        <div id="layerH" style="z-index:1; visibility:hidden; background-color:Gray; border:solid 1px red;">
            <p><span style="font-size: 16pt; font-weight: bold">使用说明</span></p>
            <hr noshade size="1" />
            <div id="HelpText" style="height: 120px">说明文字</div>
            <hr noshade size="1" />
            <form name="formV" method="POST">
                <input type="button" value="确认" name="B1" style="color: #FFFFFF; text-shadow: 0px -1px 1px #000;" onclick=" layerH.style.visibility='hidden'">
            </form>
        </div>

        <script type="text/javascript">
            function pHelp() {
                console.log('pHelp');
                var layerH = document.getElementById('layerH');
                layerH.style.visibility = 'visible';
                layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms";
                layerH.className = 'sZoom';
            }

            window.onload = function () {
                pHelp();
            };
        </script>

    </div>
</body>
</html>
